<template>
	<view class="bg">
		<image src="/pagesA/static/login_bg.png" style="height: 100%;width: 100%;" mode=""></image>
		<image class="change" :style="{top:vuex_sys.menuTop+100+'px'}" src="/pagesA/static/change.png" style="height: 178rpx;width: 427rpx;" mode=""></image>
	</view>
	<view class="title"  :style="{top:vuex_sys.menuTop+5+'px',height:vuex_sys.menuHeight+'px'}">
		<wd-icon @click="back" name="thin-arrow-left" size="20px" color="#ffffff" />
	</view>
	<view class="login-conter">
		<!-- 已有用户 -->
		<view v-if="telephone">
			<view class="tag" >
				<text>近期您的微信绑定过{{phoneHide(telephone)}}帐户 </text>
				<text>点击可自动登录 </text>
			 </view>
			 <wd-button custom-class="custom-shadow"  @click="toLogin">手机号快捷登录</wd-button>
		</view>
		<view v-else>
			<wd-button  custom-class="custom-shadow"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号快捷登录</wd-button>
		</view>
		<view class="custom-shadow2" @click="toPhone">使用其他手机号登录</view>
		<view class="change">
			<wd-checkbox v-model="checkboxValue"  checked-color="#20411C">
				<view class="change_text">点击同意  <span class="span" @click.stop="toWeb(1)">change平台用户协议 </span> 与  <span class="span" @click.stop="toWeb(2)">隐私政策</span></view>
			</wd-checkbox>
		</view>
	</view>
</template>
<script setup>
    import {useUserStore} from '@/store/user';
	const userStore = useUserStore();
	const vuex_sys = userStore.vuex_sys;
	const phoneCode = ref(null)
	const openId = ref(null);
	const telephone = ref(null);
	const checkboxValue = ref(false)
	
	const dataInfo = ref({})

	onLoad(() => {
		// #ifdef MP-WEIXIN
			uni.showLoading({
				title: '加载中...'
			})
			wx.login({
			  success (res) {
				  console.log(res);
				  getlogin(res.code);
			  }
			})
		// #endif
		
	});
	
	// mini_auth_openid(小程序授权openid);  mini_auth_phone(小程序授权手机号)
	const getlogin = async (code) => {
		const res = await uni.api.login({loginType:'mini_auth_openid',code:code});
		openId.value = res.data?.openid || null;
		uni.hideLoading()
		if(res.data?.authenticationToken){ // 有个人信息
			dataInfo.value = res.data;
			telephone.value = res.data?.telephone || null;
			checkboxValue.value = true;
		}
		
	};
	// 手机号脱敏
	const phoneHide = (phone)=> {
		let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
		phone = phone.replace(reg, '$1****$2');
		return phone;
	}
	// 返回
	const back = () => {
		uni.navigateBack();
	}
	// 外链
	const toWeb = (num) => {
		if(num == 1){
			uni.navigateTo({
				url: '/pagesA/view/rich/index?title=隐私条款&url=https://api-v3.changepro.vip/vip-privacy-policy.html'
			})
			}else{
			uni.navigateTo({
				url: '/pagesA/view/rich/index?title=服务协议&url=https://api-v3.changepro.vip/user-agreement.html'
			})
		}
	}
	// 跳转其他手机
	const toPhone = () => {
		if(openId.value){
			uni.redirectTo({
				url: '/pagesA/view/login/loginPhone?openId='+openId.value
			})
		}else{
			uni.redirectTo({
				url: '/pagesA/view/login/loginPhone'
			})
		}
	}
	
	// 获取手机号 的code
	const getPhoneNumber = async (e) => {
		// 同意协议可以往下进行
		if(!checkboxValue.value){
			uni.showToast({
				title: '请先阅读并同意change平台用户协议与隐私政策',
				icon: 'none',
			});
			return;
		}
		
		phoneCode.value = e.code;
		const res = await uni.api.login({loginType:'mini_auth_phone',code:phoneCode.value,openid:openId.value});
		// 直接登录 登录
		if(res.data.authenticationToken){
			userStore.login(res.data.authenticationToken,res.data);
			
			uni.switchTab({
				url: '/pages/index/index',
				success: e => {
					uni.showToast({
						title: '登录成功',
						icon: 'none',
					});
				   var page = getCurrentPages().pop();// 返回页面数组的最后一个页面数据
				   page.onLoad();
				}
			})
		}
	}
	// 直接登录
	const toLogin = () => {
		// 同意协议可以往下进行
		if(!checkboxValue.value){
			uni.showToast({
				title: '请先阅读并同意change平台用户协议与隐私政策',
				icon: 'none',
			});
			return;
		}
		userStore.login(dataInfo.value.authenticationToken,dataInfo.value);
		uni.switchTab({
			url: '/pages/index/index',
			success: e => {
				uni.showToast({
					title: '登录成功',
					icon: 'none',
				});
			   var page = getCurrentPages().pop();// 返回页面数组的最后一个页面数据
				console.log(page);
				
			page.onLoad();
			}
		})
	}
	
</script>
<style lang="scss">
	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
		.change{
			position: fixed;
			z-index: 10;
			top: 200rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.title{
		position: fixed;
		z-index: 10;
		padding-left: 40rpx;
	}
	.login-conter{
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 800rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.tag{
			width: 567rpx;
			height: 90rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 58rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		:deep(.custom-shadow) {
			margin-top: 58rpx;
			width: 610rpx;
			height: 90rpx !important;
			background: #20411C !important;
			border-radius: 12rpx 12rpx 12rpx 12rpx !important;
	    }
		.custom-shadow2{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			margin-top: 36rpx;
		}
		.change{
			display: flex;
			position: absolute;
			bottom: 40rpx;
			.change_text{
				font-size: 20rpx;
				color: #FFFFFF;
			}
		}
	}
	.span{
		text-decoration: underline !important;
	}
</style>